<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.5.5.4/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.5.5.4/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../static/plugins/easyui/common/index.css">
	<link href="../static/plugins/easyui/jquery-easyui-theme/icon.css" rel="stylesheet" type="text/css" />
	<link href="../static/plugins/easyui/icons/icon-all.css" rel="stylesheet" type="text/css" />
	
	<script src="../webjars/jquery/3.3.1/dist/jquery.js"></script>
	<script type="text/javascript" src="../static/plugins/jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
	<style type="text/css">
	body {
	    font-family:verdana,helvetica,arial,sans-serif;
	    padding:20px;
	    font-size:12px;
	    margin:0;
	}
	h2 {
	    font-size:18px;
	    font-weight:bold;
	    margin:0;
	    margin-bottom:15px;
	}
	.demo-info{
		padding:0 0 12px 0;
	}
	.demo-tip{
		display:none;
	}
	.label-top{
	    display: block;
	    height: 22px;
	    line-height: 22px;
	    vertical-align: middle;
	}
	#northPanel{
		height:80px!important;
	}
	
	</style>
	
	<script type="text/javascript" th:inline="javascript">
		var databaseName;
		var path = /*[[@{/databaseHandler/}]]*/;
		/*<![CDATA[*/
        var context = /*[[@{/}]]*/;
        /*]]>*/
		console.log(path);
		//var contextpath="http://localhost:8888/databaseManage/"
		$(function(){
			initDatabaseList();
		});
		//初始化数据库连接信息下拉列表
		function initDatabaseList(){
		   $.ajax({
				type:'get',
				url:path+"getDatabaseInfoList",
				success: function(response){
					$("#databaseSelect").empty();
					console.log(response.length);
					for(var i=0;i<response.length;i++){
						$("#databaseSelect").append("<option value='"+response[i].id+"' title='"+response[i].databaseName+"'   >"+"【"+  response[i].databaseType +"】"+response[i].ip +":"+response[i].port + " </option>");
					}
					 /* $.each(obj, function(index,value){
						 console.log(obj[0].id);
						 $("#databaseSelect").append("<option value='"+obj[index].id+"' title='"+obj[index].databaseName+"'   >"+"【"+  obj[index].databaseType +"】"+obj[index].ip +":"+obj[index].port + " </option>");
					 }); */
					 //databaseName = response[0].databaseName ;
					 initDatabaseTable(response[0].id);
				} 
				
			});
		 }
		
		function changeConnection(){
			var connectionId=$("#databaseSelect").val();
			console.log("更改连接"+connectionId);
			initDatabaseTable(connectionId);
		}
		
		//左侧菜单 库表 展示
		 function initDatabaseTable(connectionId){
			//databaseName =  $('#databaseSelect').val();
			var databaseConfigId =  $('#databaseSelect').val();
			dg=$('#pid').treegrid({
			method: "GET",
		    url:path+"getDatabaseInfoById?databaseConnectionId="+connectionId,
		    fit : true,
			fitColumns : true,
			border : false,
			idField : 'id',
			treeField:'databaseName',
			parentField : 'parentId',
			iconCls: 'icon-hamburg-database',
			animate:true, 
			rownumbers:false,
			singleSelect:true,
			striped:true,
			state: "closed",
		    columns:[
		    	[    
			        {field:'databaseName',title:'&nbsp;&nbsp;详情',width:210}
			    ]
		    ],
		    enableHeaderClickMenu: false,
		    enableHeaderContextMenu: false,
		    enableRowContextMenu: false,
		    //onContextMenu: onContextMenu,
		    dataPlain: false,
		    onBeforeExpand:function(row,param){
		    	console.log(param);
		    	console.log(row);
		    	var parentId=row.id;
		    	if(!row.children){
		    		var connectionId=$("#databaseSelect").val();
		    		if(row.databaseType=="database"){//展开数据库节点
		    			$('#pid').treegrid('append', {
				            parent : parentId,
				            data : [ {
				                id :"table"+new Date().getTime(),
				                databaseName :"表",
				                sort :'1',
				                databaseType:"table",
				                iconCls:"icon-berlin-billing",
				                state:"closed"
				            },{
				            	id :"view"+new Date().getTime(),
				                databaseName :"视图",
				                sort :'1',
				                databaseType:"view",
				                state:"closed",
				                iconCls:"icon-berlin-address"
				            } ]
				        });
		    		}
			    	
			    	if(row.databaseType=="table"){//展开表节点
			    		var parent = $("#pid").treegrid("getParent", row.id );
				    	console.log(parent);
				    	databaseName=parent.databaseName;
				    	if(!row.children){
				    		$.ajax({
								type:'post',
								url:path+"getTableInfoBydatabaseInfo?connectionId="+connectionId+"&databaseName="+parent.databaseName,
								success: function(response){
									console.log(response.length);
									console.log(response);
									for(var i=0;i<response.length;i++){
										$('#pid').treegrid('append', {
								            parent : parentId,
								            data : [ {
								                id :response[i].table_name,
								                databaseName :response[i].table_name,
								                sort :'1',
								                databaseType:"tableName"
								            } ]
								        })
									} 
								} 
								
							});
				    	}
			    	}if(row.databaseType=="view"){//展开视图节点
			    		var parent = $("#pid").treegrid("getParent", row.id );
				    	console.log(parent);
				    	databaseName=parent.databaseName;
				    	if(!row.children){
				    		$.ajax({
								type:'post',
								url:path+"getViewListBydatabaseInfo?connectionId="+connectionId+"&databaseName="+parent.databaseName,
								success: function(response){
									console.log(response.length);
									console.log(response);
									for(var i=0;i<response.length;i++){
										$('#pid').treegrid('append', {
								            parent : parentId,
								            data : [ {
								                id :response[i].table_name,
								                databaseName :response[i].table_name,
								                sort :'1',
								                databaseType:"viewName"
								            } ]
								        })
									} 
								} 
								
							});
				    	}
			    	}
		    	}
		    }, 
		    onClickRow:function(rowData){
		    	console.log(rowData);
		    	//跳转到字段详情页面
		    	if(rowData.databaseType=="tableName"){
		    		var tableName=rowData.databaseName;
		    		var connectionId=$("#databaseSelect").val();
		    		var url=context+"page/tableInfoPage?databaseName="+databaseName+"&connectionId="+connectionId+"&tableName="+tableName;
			    	var title=tableName+'@'+databaseName;
		    		addTab(title,url);
		    	}else if(rowData.databaseType=="table"){//表的列表信息页面
		    		var connectionId=$("#databaseSelect").val();
		    		var parent = $("#pid").treegrid("getParent", rowData.id );
			    	console.log(parent);
			    	var dbaseName=parent.databaseName;
		    		var url=context+"page/databaseWithTableInfoPage?connectionId="+connectionId+"&databaseName="+dbaseName;
		    		var title=dbaseName;
		    		console.log("connectionId"+dbaseName);
		    		addTab(title,url);
		    	}else if(rowData.databaseType=="viewName"){//视图的字段信息页面
		    		var viewName=rowData.databaseName;
		    		var connectionId=$("#databaseSelect").val();
		    		var url=context+"page/viewFieldsInfoPage?connectionId="+connectionId+"&databaseName="+databaseName+"&viewName="+viewName;
		    		var title=viewName+'@'+databaseName;
		    		addTab(title,url);
		    	}
		    	
		    }
		  });
		 }
		
		function ShowConfigPage(){
			var url=context+"page/databaseConfigPage";
    		var title="参数设置";
    		addTab(title,url);
		 }
		
		 function addTab(title, url){
				if ($('#mainTabs').tabs('exists', title)){
					console.log("addTab");
					$('#mainTabs').tabs('select', title);
				} else {
					var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
					$('#mainTabs').tabs('add',{
						title:title,
						content:content,
						closable:true
					});
				}
			}
		 function logout(){
			 $.ajax({
					type:'get',
					url:context+"logout",
					success: function(response){
						console.log(response); 
					} 
					
				});
		 }
		function test(){
			console.log("父窗口中的方法");
		}
	</script>
</head>
<body>
	<!-- 容器遮罩 -->
    <div id="maskContainer">
        <div class="datagrid-mask" style="display: block;"></div>
        <div class="datagrid-mask-msg" style="display: block; left: 50%; margin-left: -52.5px;">
            正在加载...
        </div>
    </div>
    
    <div id="mainLayout" class="easyui-layout hidden" data-options="fit: true">
    
        <div id="northPanel"   data-options="region: 'north', border: false" style="height: 80px; overflow: hidden;">
           
            <div id="topbar" style="width: 100%;height:52px; background: #0092dc url('../static/images/mosaic-pattern.png') repeat;opacity:0.8;">
            
                <div class="top-bar-left">
                    <h1 style="margin-left: 10px; margin-top: 10px;color: #fff">
                    <!-- <img src="../static/images/logo.png" > -->
                    	数据库管理系统</h1>
                </div>
                
                <div class="top-bar-right" >
                    <div id="timerSpan"> 
                    
                     <div id="operator" style="padding:5px;height:auto">
                      <div style="padding-right:20px;height:auto">
                       
                         <!-- <c:if test="${fn:contains(permission,'synchronize')}">    
                           <div style="padding-right:20px; display:inline; cursor:pointer;">
                                 <img   src="${ctx}/static/images/btn_synchronize.gif" onclick="javascript:dataSynchronize()"  title="数据交换同步"/>
                           </div>
                         </c:if>
                         
                         <c:if test="${fn:contains(permission,'monitor')}"> 
                           <div style="padding-right:20px; display:inline; cursor:pointer;">
                                 <img   src="${ctx}/static/images/alarm.gif" onclick="javascript:monitor()"  title="状态监控"/>
                           </div> 
                         </c:if>
                         
                         <c:if test="${fn:contains(permission,'backdatabase')}">    
                         <div style="padding-right:20px; display:inline; cursor:pointer;">
                                 <img   src="${ctx}/static/images/btn_hd_backup.gif" onclick="javascript:backupDatabase()"  title="备份/还原"/>
                         </div> 
                         </c:if>
                         
                        <c:if test="${fn:contains(permission,'json')}">  
                         <div style="padding-right:20px; display:inline; cursor:pointer;">
                                 <img   src="${ctx}/static/images/btn_json.gif" onclick="javascript:jsonFormat()"  title="Json格式化"/>
                          </div> 
                         </c:if> -->
                         
                          <!-- <c:if test="${fn:contains(permission,'config')}">   -->
                           <div style="padding-right:20px; display:inline; cursor:pointer;">
                                 <img   src="../static/images/btn_hd_support.gif" onclick="javascript:ShowConfigPage()"  title="参数配置"/>
                          </div>  
                         <!--  </c:if> -->
                           <!-- <div style="padding-right:20px; display:inline;cursor:pointer; ">
                               <img src="..、/static/images/btn_hd_pass.gif" onclick="javascript:ShowPasswordDialog()"  title="修改用户密码"  />
                          </div> -->  
                          <div style=" display:inline;cursor:pointer; ">
                             <a th:href="@{../logout}"><img id="btnExit"   src="../static/images/btn_hd_exit.gif" title="注销"/> </a>
	       		          </div> 
	       		      </div> 
                      </div>
                    </div>
                    
                    <div id="themeSpan">
                        <a id="btnHideNorth" class="easyui-linkbutton" data-options="plain: true, iconCls: 'layout-button-up'"> </a>
                    </div>
                </div>
            </div>
            
            <div id="toolbar" class="panel-header panel-header-noborder top-toolbar">
                <div id="infobar">
                    <span class="icon-hamburg-user" th:text="${userName}+',您好'" style="padding-left: 25px; background-position: left center;">
                    </span>
                </div>
               
                <!-- <div id="buttonbar">
                    <a href="javascript:void(0);"  id="btnFullScreen" class="easyui-linkbutton easyui-tooltip" title="全屏切换" data-options="plain: true, iconCls: 'icon-standard-arrow-inout'"  >全屏切换</a> 
                
                    <span>更换皮肤：</span>
                    <select id="themeSelector"></select>					
                    <a id="btnShowNorth" class="easyui-linkbutton" data-options="plain: true, iconCls: 'layout-button-down'" style="display: none;"></a>
               
                </div> -->
            </div>
        </div>

        <div data-options="region: 'west', title: '数据库选择', iconCls: 'icon-standard-map', split: true, minWidth: 200, maxWidth: 400" style="width: 220px; padding: 1px;">
			  
			<div id="eastLayout" class="easyui-layout" data-options="fit: true">
                <div data-options="region: 'north', split: false, border: false" style="height: 34px;">
                    <select class="combobox-f combo-f" style="width:200px;margin:5px; " id="databaseSelect" th:onchange="'javascript:changeConnection();'">   
                    	<!-- <option value='2' title='"+data[index].name+"'   >mysql+data[index].ip +":"+data[index].port + " </option> -->
                    </select> 
                </div>
                
                <div   data-options="region: 'center', border: false, title: '数据库', iconCls: 'icon-hamburg-database', tools: [{ iconCls: 'icon-hamburg-refresh', handler: function () {  dg.treegrid('reload'); } }]">
                       <input id="pid" name="pid" />  
                </div>
            </div>
			  
        </div>

        <div data-options="region: 'center'">
            <div id="mainTabs_tools" class="tabs-tool">
                <table>
                    <tr>
                        <td><a id="mainTabs_jumpHome" class="easyui-linkbutton easyui-tooltip" title="跳转至主页选项卡" data-options="plain: true, iconCls: 'icon-hamburg-home'"></a></td>
                        <td><div class="datagrid-btn-separator"></div></td>
						<td><a id="mainTabs_toggleAll" class="easyui-linkbutton easyui-tooltip" title="展开/折叠面板使选项卡最大化" data-options="plain: true, iconCls: 'icon-standard-arrow-out'"></a></td>
                        <td><div class="datagrid-btn-separator"></div></td>
                        <td><a id="mainTabs_refTab" class="easyui-linkbutton easyui-tooltip" title="刷新当前选中的选项卡" data-options="plain: true, iconCls: 'icon-standard-arrow-refresh'"></a></td>
                        <td><div class="datagrid-btn-separator"></div></td>
                        <td><a id="mainTabs_closeTab" class="easyui-linkbutton easyui-tooltip" title="关闭当前选中的选项卡" data-options="plain: true, iconCls: 'icon-standard-application-form-delete'"></a></td>
                    </tr>
                </table>
            </div>

            <div id="mainTabs" class="easyui-tabs" data-options="fit: true, border: false, showOption: true, enableNewTabMenu: true, tools: '#mainTabs_tools', enableJumpTabMenu: true">
                <div id="homePanel" data-options="title: '首页', iconCls: 'icon-hamburg-home'">

                </div>
            </div>
        </div>
        
        <div data-options="region: 'east', title: '', iconCls: 'icon-standard-book', split: true,collapsed: true, minWidth: 160, maxWidth: 500" style="width: 220px;">
            <div id="eastLayout" class="easyui-layout" data-options="fit: true">
               
                <!-- <div data-options="region: 'north', split: true, border: false" style="height: 220px;">
                     <input id="sqlStudyList"   />  
                </div>
                
                <div id="searchHistoryPanel" data-options="region: 'center', split: true,  border: false, title: '我的SQL', iconCls: 'icon-standard-book-key', tools: [{ iconCls: 'icon-hamburg-refresh', handler: function () {  searchBG.treegrid('reload'); } }]">
                       <input id="searchHistoryList"   />  
                </div> -->
            </div>
        </div>

        <div data-options="region: 'south', title: '关于...', iconCls: 'icon-standard-information', collapsed: true, border: false" style="height: 70px;">
            <div style="color: #4e5766; padding: 6px 0px 0px 0px; margin: 0px auto; text-align: center; font-size:12px; font-family:微软雅黑;">
                <!-- <img src="http://www.treesoft.cn/picture/logo.png"  onerror="imgerror(this)" > -->
                <!-- <sup>®</sup> -->&nbsp;
                <a href="" target="_blank" style="text-decoration:none;" ></a> 
                &nbsp;&nbsp;
                &nbsp; 
            </div>
            
        </div>
    </div>
</body>
</html>